<template>
<table border="1">
  <tr><td>照片:</td><td><img :src="person.imgUrl" width="100"></td></tr>
  <tr><td>姓名:</td><td>{{person.name}}</td></tr>
  <tr><td>年龄:</td><td>{{person.age}}</td></tr>
  <tr><td>好友:</td><td>
    <ul>
      <li v-for="friendName in person.friends">{{friendName}}</li>
    </ul>
  </td></tr>
</table>
  <button @click="load()">加载数据</button>
</template>

<script setup>
  import {ref} from "vue";

  const person = ref({name:"",age:"",imgUrl:"",friends:[]});
  const load = ()=>{
    person.value = {name:"罗宾",age:"28",
      imgUrl:"a.png",friends:["路飞","索隆","娜美"]}
  }
</script>

<style scoped>

</style>